<!--
 * @Author: zhangguowei 974599791@qq.com
 * @Date: 2022-08-23 11:48:43
 * @LastEditors: zhangguowei 974599791@qq.com
 * @LastEditTime: 2022-09-29 17:31:15
 * @Description: 
-->
<script  lang="tsx" setup>
import { getUserApi } from "@/api/common";
// jsx使用demo
import cs from "@/components/jsx-demo.jsx";
import myTable from "../components/table/myTable.vue";
// import { ElTag } from "element-plus";
const getData = async () => {
  // 发送请求的demo
  getUserApi({
    pageSize: 1,
    pageNum: 2,
  }).then((res) => {
    // res.data中的值就是事先传入的泛型类型
    console.log(res.data.data);
    return res.data.data;
  });
};

// 通用tabledemo
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
const column = [
  {
    label: "姓名",
    prop: "name",
    render: (h, row) => {
      // render写法
      // return h(ElTag, null, row.name);
      // jsx写法
      return <el-tag>{row.name}</el-tag>;
    },
  },
  {
    label: "地址",
    prop: "address",
  },
  {
    label: "日期",
    prop: "date",
  },
];
</script>


<template>
  <!-- tailwindcss demo -->
  <div class="text-yellow-400">你好世界</div>
  <cs></cs>
  <myTable
    :get-data="getData"
    :init-get-data="false"
    :tableData="tableData"
    :column="column"
    stripe
  ></myTable>
</template>

<style scoped>
</style>
